import React, { useState } from 'react';
import { Form, Input, Button, Select, Divider, message } from 'antd';
import { UserOutlined, LockOutlined, MailOutlined, UserAddOutlined } from '@ant-design/icons';
import { RegisterRequest } from '../../api/auth';
import './RegisterForm.scss';

const { Option } = Select;

interface RegisterFormProps {
    onFinish?: (values: RegisterRequest) => void;
    loading?: boolean;
    roles?: { value: string; label: string }[];
}

const RegisterForm: React.FC<RegisterFormProps> = ({
    onFinish,
    loading = false,
    roles = [
        { value: 'user', label: '普通用户' },
        { value: 'manager', label: '管理员' }
    ]
}) => {
    const [form] = Form.useForm();

    const handleFinish = (values: RegisterRequest) => {
        if (onFinish) {
            onFinish(values);
        }
    };

    // 校验确认密码
    const validateConfirmPassword = (_: any, value: string) => {
        const password = form.getFieldValue('password');
        if (!value) {
            return Promise.reject(new Error('请确认密码'));
        }
        if (password !== value) {
            return Promise.reject(new Error('两次输入的密码不一致'));
        }
        return Promise.resolve();
    };

    return (
        <Form
            form={form}
            name="register"
            onFinish={handleFinish}
            size="large"
            style={{ width: '100%' }}
            scrollToFirstError
        >
            <Divider orientation="left">基本信息</Divider>

            <div className="form-item-wrapper">
                <Form.Item
                    name="username"
                    rules={[
                        { required: true, message: '请输入用户名' },
                        { min: 3, message: '用户名至少3个字符' },
                        { max: 20, message: '用户名最多20个字符' },
                        { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线' }
                    ]}
                >
                    <Input
                        prefix={<UserOutlined />}
                        placeholder="请输入用户名"
                        autoComplete="username"
                        className="styled-input"
                    />
                </Form.Item>
            </div>

            <div className="form-item-wrapper">
                <Form.Item
                    name="name"
                    rules={[
                        { required: true, message: '请输入姓名' },
                        { max: 50, message: '姓名最多50个字符' }
                    ]}
                >
                    <Input
                        prefix={<UserAddOutlined />}
                        placeholder="请输入姓名"
                        className="styled-input"
                    />
                </Form.Item>
            </div>

            <div className="form-item-wrapper">
                <Form.Item
                    name="email"
                    rules={[
                        { required: true, message: '请输入邮箱' },
                        { type: 'email', message: '请输入有效的邮箱地址' }
                    ]}
                >
                    <Input
                        prefix={<MailOutlined />}
                        placeholder="请输入邮箱"
                        className="styled-input"
                    />
                </Form.Item>
            </div>

            <Divider orientation="left">安全信息</Divider>

            <div className="form-item-wrapper">
                <Form.Item
                    name="password"
                    rules={[
                        { required: true, message: '请输入密码' },
                        { min: 6, message: '密码至少6个字符' }
                    ]}
                    hasFeedback
                >
                    <Input.Password
                        prefix={<LockOutlined />}
                        placeholder="请输入密码"
                        className="styled-password-input"
                    />
                </Form.Item>
            </div>

            <div className="form-item-wrapper">
                <Form.Item
                    name="confirmPassword"
                    dependencies={['password']}
                    hasFeedback
                    rules={[
                        { required: true, message: '请确认密码' },
                        { validator: validateConfirmPassword }
                    ]}
                >
                    <Input.Password
                        prefix={<LockOutlined />}
                        placeholder="请确认密码"
                        className="styled-password-input"
                    />
                </Form.Item>
            </div>

            <Divider orientation="left">角色信息</Divider>

            <div className="form-item-wrapper">
                <Form.Item
                    name="role"
                    initialValue="user"
                >
                    <Select placeholder="请选择角色">
                        {roles.map(role => (
                            <Option key={role.value} value={role.value}>{role.label}</Option>
                        ))}
                    </Select>
                </Form.Item>
            </div>

            <Form.Item style={{ marginTop: '30px' }}>
                <Button
                    type="primary"
                    htmlType="submit"
                    loading={loading}
                    block
                    className="styled-button"
                >
                    注册账号
                </Button>
            </Form.Item>
        </Form>
    );
};

export default RegisterForm; 